<template>
  <div style="margin-top: -20px;">
    <div class="首页顶部轮播">
      <el-carousel :interval="4000" style="width: 100%;" height= "400px" indicator-position="outside" indicator-trigger="hover">
        <el-carousel-item v-for="(item, index) in tenclubs" :key="index">
          <div style="position: relative;">
            <div class="pic">
              <img :src="tenimages[index].picture" alt="club image" style="width: 80%; max-width: 100%; object-fit: cover;" />
            </div>
            <div class="carousel-caption">
              <h3>{{ item.Cname }}</h3>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="Mcontainer">
      <div class="轮播板块">
        <div class="首页社团轮播" style="margin-top: 20px;">
          <div class="title">
            <h1 @click="this.$router.push('/club');" style="cursor: pointer;font-size: 30px">>> 社团面貌</h1>
          </div>
          <el-carousel :interval="4000" style="width: 100%; margin-left: 100px;margin-top: 5px;" height="200px" indicator-position="none">
            <el-carousel-item v-for="(item, index) in clubs" :key="index">
              <div class="carousel-content" >
                <div class="pic">
                  <img :src="clubimages[index].picture" alt="club image" />
                </div>
                <div class="info" >
                  <h2 style="margin-top: 7px;" >{{ item.Cname }}</h2>
                  <div style="margin-top: -10px;gap: 10px; ">
                    <el-tag effect="dark" size='large' type="success" style="opacity: 0.7; font-size: 14px; padding:  2px 14px;height:22px;">{{ getTypeText(item.Type) }}</el-tag>
                    <el-tag effect="dark" size='large' type="warning" style="opacity: 0.7; margin-left: 10px; font-size: 14px; padding:  2px 14px;height:22px;">{{ getAddressText(item.Address)}}</el-tag>
                  </div>
                  <p style="text-align: left; margin-left:12px;height: 10px;margin-top: 8px;"><strong>社团宗旨：</strong>{{ item.Aim}}</p>
                  <div style="text-align: left; margin-left:12px; font-family: Arial; font-size: 16px;width: 310px; height: 67px;
                    display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;text-overflow: ellipsis; ">
                    <span> <strong><span style="font-size: 16px;">社团简介：</span></strong> {{ item.Introduction}}</span>
                  </div> 
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="首页社团活动轮播" >
          <div class="title">
            <h1 @click="this.$router.push('/activity');" style="cursor: pointer;font-size: 30px">>> 社团活动</h1>
          </div>
          <el-carousel :interval="4000" style="width: 100%; margin-left: 100px;margin-top: 5px;" height="200px" indicator-position="none">
            <el-carousel-item v-for="(item, index) in activities" :key="index">
              <div class="carousel-content">
                <div class="pic">
                  <img :src="clubimages[index].picture" alt="activity image" />
                </div>
                <div class="info" style="margin-top: -45px;">
                  <h2 >{{ item.ATitle }}</h2>
                  <div style="gap: 10px;margin-top: -10px;">
                    <el-tag effect="dark" size='middle' type="success" style="opacity: 0.7; font-size: 14px; padding:  2px 14px;height:22px;">{{ getTypeText(item.Type) }}</el-tag>
                    <el-tag effect="dark" size='middle' type="warning" style="opacity: 0.7; margin-left: 10px; font-size: 14px; padding:  2px 14px;height:22px;">{{ getAddressText(item.Campus)}}</el-tag>
                    <el-tag effect="dark" size='middle' type="danger" style="opacity: 0.7; margin-left: 10px; font-size: 14px; padding:  2px 14px;height:22px;">{{ getPermissionText(item.Permission)}}</el-tag>
                  </div>
                  <div style="text-align: left; margin-left:12px; margin-top:10px; font-family: Arial; font-size: 16px;width: 310px; height: 67px;
                    display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;text-overflow: ellipsis; ">
                    <span> <strong><span style="font-size: 16px;">活动简介：</span></strong> {{ item.Content}}</span>
                  </div>      
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="社团公告板块" style="margin-top: 20px;height: 600px;">
        <div class="title">
          <h1 style="margin-left: 180px;text-align: left; font-size: 30px">>> 社团公告</h1>
        </div>
        <el-tabs v-model="activeTab" style="margin-left: 180px; width:480px">
          <el-tab-pane label="校团委" name="1">
            <el-table :data="paginatedData(1)">
              <el-table-column prop="Title" ></el-table-column>
              <el-table-column prop="Ntime"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="院系" name="2">
            <el-table :data="paginatedData(2)">
              <el-table-column prop="Title"></el-table-column>
              <el-table-column prop="Ntime"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="社团" name="3">
            <el-table :data="paginatedData(3)">
              <el-table-column prop="Title"></el-table-column>
              <el-table-column prop="Ntime"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalItems"
            :page-size="pageSize"
            v-model:current-page="currentPage"
            small
            style="margin-left: 325px;margin-top: 10px">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
// import router from '@/router';
import axios from 'axios'
export default {
  data(){
    return{
      currentPage:1,
      pageSize:10,
      activeTab:'1',
      tenclubs:[],
      tenimages:[
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
      ],
      clubimages:[
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club1.jpg')},
        {picture:require('../assets/club2.jpg')},
        {picture:require('../assets/club2.jpg')},
      ],
      clubs:[],
    activities:[],
    tableData:[],
    }
  },
  computed:{
    getTypeText() {
      return (type) => {
        switch (type) {
          case 1:
              return '思想政治类';
          case 2:
              return '学术科技类';
          case 3:
              return '体育竞技类';
          case 4:
              return '志愿公益类';
          case 5:
              return '文化艺术类';
          default:
              return '';
        }
      };
    },
    getAddressText() {
      return (address) => {
        switch (address) {
          case 1:
              return '南校区';
          case 2:
              return '北校区';
          case 3:
              return '珠海校区';
          case 4:
              return '深圳校区';
          case 5:
              return '东校区';
          case 6:
              return '五校园'
          default:
              return '';
          }
      };
   },
   getPermissionText() {
    return (permission) => {
      switch (permission) {
        case 1:
            return '仅社团成员可报名';
        default:
            return '';
      }
    };
  },
    totalItems() {
      return this.filteredTableData(this.activeTab).length;
    },
  },
  methods:{
    filteredTableData(Sender) {
      return this.tableData.filter(item => item.Sender === parseInt(Sender));
    },
    paginatedData(Sender) {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.filteredTableData(Sender).slice(start, end);
    },
  },
  watch: {
    activeTab() {
      this.currentPage = 1;
    }
  },
  created(){
    // 得到景区数据
    // 发送POST请求到后端
    axios.get('/home')
      .then(response => {
        console.log(response.data)
        this.clubs = response.data.data.clubs
        this.tenclubs = response.data.data.tenclubs
        this.activities = response.data.data.activities
        this.tableData = response.data.data.notices
      })
    .catch(error=>{
      console.log(error);
    });
  }
}
</script>

<style scoped>
.首页社团轮播 .el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Mcontainer {
  display: flex; /* 使用 Flexbox 布局 */
  align-items:flex-start;
}

.轮播板块, .社团公告板块 {
  flex: 1; /* 设置元素的 flex-grow 属性为 1，使它们自动填充父容器的剩余空间 */
}
.首页社团轮播 .title {
  display: flex;
  margin-left: 100px
}
.首页社团活动轮播 .title {
  display: flex;
  margin-left: 100px
}
.carousel-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.pic {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pic img {
  width: 100%;
  height: auto;
  /* max-width: 500px; */
  max-height: 400px;
}

.carousel-caption {
    position: absolute;
    /* top: 80%; */
    bottom: 10%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.298); /* 半透明背景 */
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    text-align: center;
    z-index: 10;
    width: 78%;
    box-sizing: border-box;
  }

.info {
  flex: 1;
  background-color: #003a05c1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
